<template>
  <div class="order-box">
    <div class="time">
      <div class="time-left">{{ item.created_at | getTime }}</div>
      <div class="time-right font" :class="`status${item.order_status}`">
        {{
          item.order_status == 0
            ? "待审核"
            : item.order_status == 1
            ? "备货中"
            : item.order_status == 2
            ? "配送中"
            : item.order_status == 4
            ? "已取消"
            : "已完成"
        }}
      </div>
    </div>
    <div class="flex-wrap">
      <div class="row_start order-box-top-left" @click.stop="forward(item)">
        <div class="logo">
          <image
            :src="
              'https://copartner.oss-cn-beijing.aliyuncs.com/' +
                item.company_logo || '/static/home_menu_image/shop-img.png'
            "
          >
          </image>
        </div>
        <div class="shopName one_ellipsis">{{ item.company_name }}</div>
        <uni-icons type="forward" size="12" class="forward"></uni-icons>
      </div>
      <div class="total-num">
        <span>共 {{ item.sum_order_num }} 件</span>
      </div>
    </div>
    <!-- <div class="line"></div> -->
    <div class="row_between order-box-top">
      <div class="order-box-top-right"></div>
    </div>
    <div class="row_between order-box-meddle">
      <div class="images row_start">
        <div
          class="column_start images-box"
          v-for="(list, index) in item.goods_info"
          :key="index"
        >
          <div class="images-box-img">
            <image :src="list.img"></image>
          </div>
          <span class="imgdata" v-if="item.sum_order_num == 1">{{
            item.goods_name
          }}</span>
        </div>
      </div>
      <!-- <div class="images row_start" v-else>
        <div
          class="column_start images-box"
          v-for="(list, index) in item.goods_info"
          :key="index"
        >
          <div class="images-box-img">
            <image :src="list.img"></image>
          </div>
          <div class="images-box-content">
            <div class="images-box-content-title">
              {{ list.name }}
            </div>
            <div class="images-box-content-bottom">
              <span>规格: {{ list.spu_name }} </span>
              <span>数量: {{ list.order_num }}</span>
            </div>
          </div>
        </div>
      </div> -->

      <div class="total">
        <!-- <div class="total-money">
          <span class="heji">合计:</span>
          <span class="tubiao">￥</span>
          <span class="jine">{{ item.origin_should_money }}</span>
        </div> -->
        <div class="totalgood">
          <div class="total-money">
            <span class="heji">配送金额:￥</span>
            <span class="heji">{{ item.send_money }}</span>
          </div>
          <div class="total-moneys">
            <span class="hejis">实付金额:</span>
            <span class="tubi">￥</span>
            <span class="jine">{{ item.real_money }}</span>
          </div>
        </div>
      </div>
      <!-- <div style="height: 130rpx" v-else>sort_money
        <span class="fonts" style="font-size: 22rpx">￥</span
        ><span class="fonts" style="font-size: 32rpx">{{
          item.origin_should_money
        }}</span>
      </div> -->
    </div>
    <div class="linse"></div>
    <div class="anniu">
      <div class="order-box-bottom" v-if="item.order_status == 0">
        <span class="again" @click.stop="cancelOrder">取消订单</span>
      </div>
      <div class="order-box-bottom" v-if="item.order_status == 2">
        <span class="again" @click.stop="logistics(item.id)">查看物流</span>
      </div>
      <div
        class="order-box-bottom"
        v-if="item.order_status == 3 || item.order_status == 4"
      >
        <span class="again" @click.stop="oneMoreOrder">再来一单</span>
      </div>
      <div class="order-box-bottom" v-if="item.order_status == 2">
        <span class="again deg" @click.stop="addOrderReturn">申请退货</span>
      </div>
      <div class="order-box-bottom" v-if="item.order_status == 2">
        <span class="again confirm" @click.stop="confirmOrder">确认收货</span>
      </div>
    </div>
  </div>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  props: ["item"],
  data() {
    return {
      url: getApp().globalData.rootUrl,
    };
  },
  filters: {
    getTime(val) {
      // 此处时间戳以毫秒为单位
      let date = new Date(parseInt(val) * 1000);
      let Year = date.getFullYear();
      let Moth =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let Minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let Sechond =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        Year +
        "-" +
        Moth +
        "-" +
        Day +
        "   " +
        Hour +
        ":" +
        Minute +
        ":" +
        Sechond
      );
    },
  },
  methods: {
    forward(info) {
      let id = info.company_id;
      let data = this.$store.state.companyData.find(
        (item) => item.supplier_id == id
      );
      this.$store.commit("changeCompanyInfo", data);
      uni.switchTab({
        url: "/pages/shop/index",
      });
    },

    oneMoreOrder() {
      //再来一单
      let that = this;
      let datas = {
        oid: this.item.goods_info[0].oid,
        company_id: this.item.company_id,
      };
      $https("GET", "onceAgain", datas, (res) => {
        if (res.data.errcode == 0) {
          this.item.supplier_id = this.item.company_id;
          let info = this.$store.state.companyData.find(
            (item) => item.supplier_id == this.item.company_id
          );
          this.$store.commit("changeCompanyInfo", info);
          uni.switchTab({
            url: `/pages/tabar/shopcart`,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    cancelOrder() {
      //取消订单
      let that = this;
      let datas = {
        oid: this.item.goods_info[0].oid,
        company_id: this.item.company_id,
      };
      uni.showModal({
        title: "提示",
        content: "是否取消订单",
        success: function (res) {
          if (res.confirm) {
            $https("GET", "cancelOrder", datas, (res) => {
              if (res.data.errcode == 0) {
                that.$emit("getData");
              } else {
                uni.showToast({
                  icon: "none",
                  title: res.data.errmsg,
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    confirmOrder() {
      //确认收货
      let that = this;
      let datas = {
        oid: this.item.goods_info[0].oid,
        company_id: this.item.company_id,
      };

      uni.showModal({
        title: "提示",
        content: "是否确定收货?",
        success: function (res) {
          if (res.confirm) {
            $https("GET", "confirmOrder", datas, (res) => {
              if (res.data.errcode == 0) {
                that.$emit("getData");
              } else {
                uni.showToast({
                  icon: "none",
                  title: res.data.errmsg,
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    addOrderReturn() {
      //申请退货
      let that = this;
      let datas = {
        oid: this.item.goods_info[0].oid,
        company_id: this.item.company_id,
      };
      uni.navigateTo({
        url: `/pages/user/return_goods/return_list?id=${this.item.id}`,
      });
    },

    logistics(id) {
      //查看物流
      // #ifdef H5
      uni.navigateTo({
        url: `/pages/order/checkLog-h5?id=${id}`,
      });
      // #endif
      // #ifndef H5
      uni.navigateTo({
        url: `/pages/order/checkLog-wx?id=${id}`,
      });
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;

  &-title {
    align-items: center;

    &-left {
      font-size: 24rpx;
      font-weight: 600;
    }

    &-state {
      font-size: 24rpx;
      font-weight: 500;
      color: #0eaa78;
      //  color: #40ae36;
    }
  }

  &-shopInfo {
    align-items: center;
    margin-top: 20rpx;

    img {
      width: 148rpx;
      height: 148rpx;
    }

    .box {
      margin-left: 20rpx;

      &-title {
        font-size: 20rpx;
        font-weight: 600;
        width: 354rpx;
      }

      &-tip {
        width: 340rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #cecece;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 设置行数 */
        -webkit-box-orient: vertical;
      }
    }
  }

  &-price {
    display: flex;
    justify-content: flex-end;
    font-size: 20rpx;
    font-weight: 600;
    margin-top: 10rpx;
  }

  &-menu {
    display: flex;
    justify-content: flex-end;

    .btn {
      border: 1rpx solid #0eaa78;
      color: #0eaa78;

      padding: 4rpx 15rpx;
      font-size: 18rpx;
      border-radius: 45rpx;
      margin-top: 10rpx;
    }
  }
}

.order-box {
  width: calc(100% - 60rpx);
  padding: 30rpx;
  .time {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid #ECECEC;
    padding-bottom: 26rpx;
    .font {
      font-family: PingFang SC;
    }

    @for $i from 1 through 2 {
      .status#{$i} {
        color: #26acf5;
      }
    }
    .status0 {
      color: #f55726;
    }
    .status3 {
      color: #40ae36;
    }
    &-left {
      font-weight: 400;
      color: $color_55;
      font-size: 26rpx;
      font-family: PingFang SC;
    }
    &-right {
      font-weight: 500;
      font-size: 32rpx;
    }
  }
  .flex-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 26rpx 0 20rpx;
    .total-num {
      font-size: 26rpx;
      color: $color_55;
    }
  }

  .line {
    width: 630rpx;
    margin: 30rpx auto 25rpx;
    height: 1rpx;
    background: #ececec;
  }
}

.order-box-top {
  align-items: center;

  &-left {
    align-items: center;

    .logo {
      width: 30rpx;
      height: 30rpx;
      border-radius: 10rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .shopName {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #000;
    }
  }

  &-right {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #656565;
  }
}
.linse {
  margin-bottom: 40rpx;
}

.order-box-meddle {
  margin-top: 18rpx;
  align-items: center;
  position: relative;

  .images {
    width: 635rpx;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;

    &-box {
      margin-right: 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      position: relative;

      .imgdata {
        width: 300rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #000;
        line-height: 36rpx;
        margin-left: 30rpx;
        position: relative;
        top: 46rpx;
      }

      &-img {
        width: 130rpx;
        height: 130rpx;
        border-radius: 16rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
      &-content {
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 140rpx;
        &-title {
          width: 320rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        &-bottom {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }

      &-name {
        font-size: $font_3;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-top: 15rpx;
        width: 160rpx;
      }
    }
  }

  .total {
    width: 230rpx;
    height: 160rpx;
    background: #ffffff;
    // margin: 20rpx 0rpx 20rpx 20rpx;
    margin-right: 20rpx;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    // width: 150rpx;
    justify-content: space-between;
    position: absolute;
    right: -25rpx;
    // background: linear-gradient(
    //   to right,
    //   rgba(255, 255, 255, 0.6) 0,
    //   rgba(255, 255, 255, 1) 30%,
    //   rgba(255, 255, 255, 1)
    // );
    .totalgood {
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;
      top: 40rpx;
    }
    .heji {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: $color_55;
    }
    .hejis {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #000;
    }
    .tubi {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #d75131;
    }
    .jine {
      height: 28rpx;
      line-height: 28rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #d75131;
    }

    &-money {
      font-size: $font_4;
      color: #333;
      font-weight: 600;
      white-space: nowrap;
    }

    &-num {
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      white-space: nowrap;
      position: relative;
      bottom: 20rpx;
    }
  }
}

.anniu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;

  .order-box-bottom {
    display: flex;
    flex-direction: row-reverse;
    // margin-top: 28rpx;
    margin-left: 20rpx;

    span {
      display: inline;
      color: $color_85;
      padding: 10rpx 20rpx;
      border: 1rpx solid $color_55;
      border-radius: 45rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .deg {
      color: #d75131;
      border-color: #d75131;
    }
    .confirm {
      color: #40ae36;
      border-color: #40ae36;
    }
  }
}
</style>